<template>
    <div class="login-form">
        <div class="form-main">
            <div class="title">登录账号</div>
            <img src="@/assets/login/login-logo.png" class="login-logo" />
            <form class="form" @keyup.enter="handleLogin">
                <div class="form-item">
                    <span class="form-item-text" >账号</span>
                    <input type="text" v-model="formData.user_name"  placeholder="请输入您的账号" />
                </div>
                <div class="form-item">
                    <span class="form-item-text">密码</span>
                    <div class="item2">
                        <input :type="showPassword ? 'text' : 'password'" v-model="formData.pass_word" placeholder="请输入您的密码" />
                            <div class="form-item__eye form-item__icon" @click="showPassword = !showPassword">
                                <img v-if="showPassword" src="@/assets/login/icon-eye.png" />
                                <img v-else src="@/assets/login/icon-eye-close.png" />
                            </div>
                    </div>
                </div>
            </form>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px">
                <div class="remember" >
                    <el-checkbox v-model="remembercheck" @change="onCheckboxChange" label="记住密码" />
                </div>
            </div>
            <div v-if="loading" class="button-login button-login--disabled">登录中...</div>
            <div v-else class="button-login" @click="handleLogin">登录</div>
            <!-- <div class="tip">还没有账号？<a href="/register">去注册</a></div> -->
        </div>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import { login } from '../../../api/user';
import { useRequest } from '@/hooks/request'
import http from '@/utils/uc-http'
import https from '@/utils/ucs-http'
// const formData = reactive({})
const formData = reactive({
  plant_code: 'duixian_desktop',
  mac: '',
})

const remembercheck = ref(false)
const showPassword = ref(false)
const usernameInput = ref('')
const passwordInput = ref('')
const userStore = useUserStore()
const onCheckboxChange = (val) => {
  console.log("Checkbox changed:", val)
  remembercheck.value = val
  console.log(remembercheck.value);
}
const { loading, request } = useRequest(async () => {
    let mac = await window.electron.getMacAddress()
    formData.mac = mac
    localStorage.mac = mac
    // formData.plant_code = userStore.packageJs.plantcode
    return http.post('/login', formData).then(res => {
        // https.post('/plant_combins',{plant_code:formData.plant_code}).then((res) =>{
        //     console.log(res);
        // })
    // console.log(token)
        userStore.loginSuccess(res)
        if (remembercheck.value === true) {
            localStorage.setItem(`username`, formData.user_name);
            localStorage.setItem(`password`, formData.pass_word);
        } else {
            localStorage.removeItem(`username`)
            localStorage.removeItem(`password`)
        }

    })
}, false)

const handleLogin = () => {
  if (!formData.user_name || formData.user_name == '') return ElMessage.warning('请输入用户名')
  if (!formData.pass_word || formData.pass_word == '') return ElMessage.warning('请输入密码')

  request()
}

onMounted(() => {
  const savedUsername = localStorage.getItem(`username`)
  const savedPassword = localStorage.getItem(`password`)

  if (savedUsername && savedPassword) {
    formData.user_name = savedUsername
    formData.pass_word = savedPassword
    remembercheck.value = true
  }
})

</script>
<style lang='scss' scoped>
.login-form{
    width: 528px;
    height: 510px;
    border-radius: 4px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: absolute; 
    top: 180px; // 设置顶部偏移
    left: 50%; // 左侧偏移50%
    transform: translateX(-50%); // 通过变换使container水平居中
    
}
.login-logo{
    margin: 12px 0 40px 0;
}
.title{
    font-size: 24px;
    font-weight: bold;
    margin-top: 64px;
}
.form-main{
    width: 368px;
    margin: 0 auto;
    text-align: center;
}
.form-item{
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}
.form-item-text{
    font-size: 14px;
    font-weight: 600;
    margin-right: auto;
    margin-bottom: 8px;
}
.item2{
    // display: flex;
    position: relative;
}
.form-item__icon {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    cursor: pointer;
}
.remember {
  display: flex;
  color: #fff;
}

input{
    padding-left: 16px;
    height: 37px;
    width: 348px;
    border-radius: 4px;
    font-size: 14px;
    border: solid 1px #d9d9d9;
    &::placeholder {
        color:#000;
        opacity: 0.3;
    }
    outline-color: #e92937;
}
input::-webkit-input-placeholder {
    position: absolute;
    left: 16px; /* 调整到所需位置 */
}
.button-login{
    width: 100%;
    line-height: 48px;
    height: 48px;
    border-radius: 4px;
    background-color: #e92937;
    margin-top: 48px;
    color: #fff;
    cursor: pointer;
}
.button-login--disabled{
    background-color: #f8f9fa;
    color: #000;
    opacity: 0.3;
    cursor: not-allowed;
}
.tip{
    margin-top: 14px;
}
a{
    text-decoration: none; //去下划线
}
a:visited{color:#e92937} //改link颜色

:deep(.el-checkbox__input.is-checked + .el-checkbox__label){
    color: #e92937;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner){
    background-color:#e92937;
    border-color:#e92937
}
</style>